<template>
  <div class="system-user-dialog-container">
    <el-dialog
      :title="state.dialog.title"
      v-model="state.dialog.isShowDialog"
      width="769px"
    >
      <el-form
        ref="userDialogFormRef"
        :rules="rules"
        :model="state.ruleForm"
        size="default"
        label-width="90px"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="用户名称" prop="userName">
              <el-input
                v-model="state.ruleForm.userName"
                placeholder="请输入账户名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="用户姓名" prop="userNickname">
              <el-input
                v-model="state.ruleForm.userNickname"
                placeholder="请输入用户昵称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="关联角色" prop="roleSign">
              <el-select
                v-model="state.ruleForm.roleSign"
                placeholder="请选择"
                clearable
                class="w100"
              >
                <el-option
                  v-for="(item, index) in roleOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="用户状态" prop="status">
              <el-switch
                v-model="state.ruleForm.status"
                inline-prompt
                active-text="启"
                inactive-text="禁"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="用户描述" prop="describe">
              <el-input
                v-model="state.ruleForm.describe"
                type="textarea"
                placeholder="请输入用户描述"
                maxlength="150"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{
            state.dialog.submitTxt
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="systemUserDialog">
import { reactive, ref } from "vue";
import { GetRoles } from "../../../api/projectManage/projectList";
// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh"]);

let rules = ref({
  userName: [{ required: false, message: "请输入名称", trigger: "blur" }],
  userNickname: [
    { required: false, message: "请选择活动区域", trigger: "change" },
  ],
  roleSign: [
    { type: "date", required: false, message: "请选择日期", trigger: "change" },
  ],
  status: [
    { type: "date", required: false, message: "请选择日期", trigger: "change" },
  ],
  describe: [
    { type: "date", required: false, message: "请选择日期", trigger: "change" },
  ],
});

// 定义变量内容
const userDialogFormRef = ref();
const state = reactive({
  ruleForm: {
    userName: "", // 账户名称
    userNickname: "", // 用户昵称
    roleSign: "", // 关联角色

    status: true, // 用户状态
    describe: "", // 用户描述
  },
  deptData: [], // 部门数据
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: "",
  },
});

let roleOptions = ref([]);
// 打开弹窗
const openDialog = async (type, row) => {
  let resRole = await GetRoles();
  roleOptions.value = resRole
    .filter((v) => v.role_auth_code >= 70 || v.role_name == "初始用户")
    .map((v) => {
      return {
        value: v.role_name,
        label: v.role_name,
      };
    });
  if (type === "edit") {
    state.ruleForm = row;
    state.dialog.title = "修改用户";
    state.dialog.submitTxt = "修 改";
  } else {
    state.dialog.title = "新增用户";
    state.dialog.submitTxt = "新 增";
  }
  state.dialog.isShowDialog = true;
  getMenuData();
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = () => {
  closeDialog();
  emit("refresh");
  // if (state.dialog.type === 'add') { }
};
// 初始化部门数据
const getMenuData = () => {
  state.deptData.push({
    deptName: "vueNextAdmin",
    createTime: new Date().toLocaleString(),
    status: true,
    sort: Math.random(),
    describe: "顶级部门",
    id: Math.random(),
    children: [
      {
        deptName: "IT外包服务",
        createTime: new Date().toLocaleString(),
        status: true,
        sort: Math.random(),
        describe: "总部",
        id: Math.random(),
      },
      {
        deptName: "资本控股",
        createTime: new Date().toLocaleString(),
        status: true,
        sort: Math.random(),
        describe: "分部",
        id: Math.random(),
      },
    ],
  });
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>
